<template>
<div>
    <van-nav-bar title="代录入病假" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">【{{type}}】 总计 : {{Total}} 天 ; 已休 : {{usedTime}}天 ; 未休 : {{usednotTime}}天 本年度享有假期 : {{thisYearTime}} 天 ; 本年度已休 : {{thisYearUsedTime}} 天 ;</van-notice-bar>
    <van-form @submit="onSubmit">
        <div class="heightF">
            <van-cell-group>
                <van-field v-model="type" type="text" input-align="right" label="请假类型" placeholder="年休假" />
            </van-cell-group>
            <van-cell-group>
                <van-cell title="代申请人员" v-model=" dsquserName" :value=this.dsquserName is-link to="selectpeop" />
            </van-cell-group>

            <van-cell-group>
                <van-field name="starttime" v-model="starttime" clearable label="开始时间" input-align="right" placeholder="请输入开始时间" @focus="start" />
                <!-- 开始时间控件 -->
                <van-popup v-model="show" position="bottom">
                    <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm" @cancel="cancel" :formatter="formatter" />
                </van-popup>
            </van-cell-group>

            <van-cell-group>
                <div class="group-leader flexbox">
                    <van-field readonly name="isAmOrPm1" clickable label="上下午" :value="value1" input-align="right" placeholder="请选择上下午" @click="mqinAi1" />
                    <div v-if="myIf1">
                        <van-popup v-model="showPicker" position="bottom">
                            <van-picker title="请选择上下午" show-toolbar :columns="columns1" @cancel="showPicker = false" @confirm="onConfirm1" />
                        </van-popup>
                    </div>
                </div>
            </van-cell-group>

            <van-cell-group>
                <van-field name="endtime" v-model="endtime" clearable label="结束时间" input-align="right" placeholder="请输入结束时间" @focus="end" />
                <!-- 结束时间控件 -->
                <van-popup v-model="show1" position="bottom">
                    <van-datetime-picker v-model="currentDate1" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm1" @cancel="cancel1" :formatter="formatter" />
                </van-popup>
            </van-cell-group>

            <van-cell-group>
                <div class="group-leader flexbox">
                    <van-field readonly name="isAmOrPm2" clickable label="上下午" :value="value2" input-align="right" placeholder="请选择上下午" @click="mqinAi2" />
                    <div v-if="myIf2">
                        <van-popup v-model="showPicker" position="bottom">
                            <van-picker title="请选择上下午" show-toolbar :columns="columns2" @cancel="showPicker = false" @confirm="onConfirm2" />
                        </van-popup>
                    </div>
                </div>
            </van-cell-group>

            <van-cell-group>
                <van-field v-model="hour" type="number" input-align="right" label="时长" />
            </van-cell-group>

            <div class="group-leader flexbox">
                <van-field readonly name="isLeaveGZ" clickable label="是否离开广州" :value="value3" input-align="right" placeholder="是否离开广州" @click="mqinAi3" />
                <div v-if="myIf3">
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker title="请选是否离开广州" show-toolbar :columns="columns3" @cancel="showPicker = false" @confirm="onConfirm3" />
                    </van-popup>
                </div>
            </div>

            <!-- <van-field v-model="reson" label="请假原因" placeholder="请输入请假原因" input-align="right" /> -->

            <van-field v-model="reson" rows="3" autosize label="请假原因" type="textarea" input-align="right" placeholder="请输入请假原因" />
        </div>

        <div>
            <!-- <van-button round block type="info" @click="handleSumbit">
                提交
        </van-button>-->
            <van-row>
                <van-col span="8">
                    <van-button type="primary" block @click="handleSumbit('insertDraft')">暂存</van-button>
                </van-col>
                <van-col span="8">
                    <van-button type="info" block @click="handleSumbit('insert')">提交</van-button>
                </van-col>
                <van-col span="8">
                    <van-button type="warning" block @click="browserPdf('LEAVE_SICK')">制度查询</van-button>
                </van-col>
            </van-row>
            <!-- <van-button @click="getDay()" type="primary">主要按钮</van-button> -->
        </div>
    </van-form>
</div>
</template>

<script>
import axios from "axios";
import {
    Dialog
} from "vant";

import {
    ADD_FILE_TYPE,
    WRITE_ADD_FILE_TYPE,
    myLeaveStatistics,
    checkApi,
    Temporary_storage
} from "@/api/fy";
import {
    getDay,
    Transformation,
    browserPdf
} from "@/api/common";

import Cookies from "js-cookie";
export default {
    name: "sss",
    components: {},
    props: {},
    data() {
        return {
            type: "病假",
            myIf1: false,
            myIf2: false,
            myIf3: false,
            reson: "",
            value1: "",
            value2: "",
            value3: "",
            hour: "",
            showPicker: false,
            showPicker1: false,
            showPicker2: false,
            columns1: ["上午", "下午"],
            columns2: ["上午", "下午"],
            columns3: ["不离开", "离开"],
            show: false, //开始时间弹窗
            show1: false, //结束时间弹窗
            minHour: 10,
            maxHour: 20,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2021, 12, 31),
            currentDate: new Date(), //开始标准时间
            currentDate1: new Date(), //结束标准时间
            starttime: "", //开始时间
            starttime1: "", //开始时间时间戳
            endtime: "", //结束时间
            endtime1: "", //结束时间时间戳
            Total: "",
            thisYearTime: "",
            thisYearUsedTime: "",
            usedTime: "",
            usednotTime: "",
            dsquserName: ''
        };
    },
    created() {
        this.applyTime =
            this.currentDate.getFullYear() +
            "年" +
            (Number(this.currentDate.getMonth()) + 1) +
            "月" +
            this.currentDate.getDate() +
            "日 " +
            this.currentDate.getHours() +
            ":" +
            this.currentDate.getMinutes();
        // this.applyTime = new Date(this.currentDate).getTime() / 1000;
        this.getmyLeaveStatistics(this.currentDate.getFullYear());

        this.dsquserName = sessionStorage.getItem("userName")
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1); //返回上一层

            sessionStorage.removeItem('userId')
            sessionStorage.removeItem('userName')
        },
        getDay() {
            const obj = {
                planStartTime: this.starttime + ":00",
                planEndTime: this.endtime + ":00",
                planStartDetailTime: this.value1 == "上午" ? 0 : 1,
                planEndDetailTime: this.value2 == "上午" ? 0 : 1
            };
            getDay(obj).then(res => {
                if (res.code == "200") {
                    this.hour = res.data.result;
                } else {
                    Dialog.alert({
                        title: "错误",
                        message: res.data.msg
                    }).then(() => {});
                }
            });
        },
        getmyLeaveStatistics(Year) {
            const obj = {
                page: 1,
                limit: 10,
                dateYear: Year,
                recordType: "LEAVE_SICK"
            };
            myLeaveStatistics(obj)
                .then(res => {
                    this.type = Transformation(res.data[0].recordType);
                    this.Total = res.data[0].sumTime;
                    this.thisYearUsedTime = res.data[0].thisYearUsedTime;
                    this.thisYearnotTime =
                        res.data[0].sumTime - res.data[0].thisYearUsedTime;
                    this.thisYearTime = res.data[0].thisYearTime;
                    this.usedTime = res.data[0].usedTime;
                    this.usednotTime = res.data[0].sumTime - res.data[0].usedTime;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        handleSumbit(type) {

            const obj = {
                recordType: "LEAVE_SICK",
                planStartTime: this.starttime + ":00",
                planEndTime: this.endtime + ":00",
                planStartDetailTime: this.value1 == "上午" ? 0 : 1,
                planEndDetailTime: this.value2 == "上午" ? 0 : 1,
                reason: this.reson,
                isLeaveGz: this.value3 == "不离开" ? 0 : 1,
                userId: sessionStorage.getItem("userId"),
                userName: this.dsquserName,
                agentUserId: Cookies.get("userId")
            };
            checkApi(obj).then(res => {
                if (res.code == "200") {
                    if (type == "insert") {
                        WRITE_ADD_FILE_TYPE(obj).then(res => {
                            Dialog.alert({
                                title: Transformation(obj.recordType),
                                message: res.msg
                            }).then(() => {
                                this.$router.go(-1);
                                sessionStorage.removeItem('userId')
                                sessionStorage.removeItem('userName')
                            });
                        });
                    } else if (type == "insertDraft") {
                        Temporary_storage(obj).then(res => {
                            Dialog.alert({
                                title: Transformation(obj.recordType),
                                message: res.msg
                            }).then(() => {
                                this.$router.go(-1);
                                sessionStorage.removeItem('userId')
                                sessionStorage.removeItem('userName')
                            });
                        });
                    }
                } else {
                    Dialog.alert({
                        title: "错误",
                        message: res.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                        sessionStorage.removeItem('userId')
                        sessionStorage.removeItem('userName')
                    });
                }
            });
        },
        browserPdf(id) {
            browserPdf(id);
        },
        onConfirm1(e) {
            this.value1 = e;
            this.showPicker = false;
        },
        onConfirm2(e) {
            this.value2 = e;
            this.showPicker = false;
            this.getDay();
        },
        onConfirm3(e) {
            this.value3 = e;
            this.showPicker = false;
        },
        mqinAi1() {
            this.myIf1 = true;
            this.myIf2 = false;
            this.myIf3 = false;
            this.myIf4 = false;
            this.myIf5 = false;
            this.showPicker = true;
        },
        mqinAi2() {
            this.myIf1 = false;
            this.myIf2 = true;
            this.myIf3 = false;
            this.myIf4 = false;
            this.myIf5 = false;
            this.showPicker = true;
        },
        mqinAi3() {
            this.myIf1 = false;
            this.myIf2 = false;
            this.myIf3 = true;
            this.myIf4 = false;
            this.myIf5 = false;
            this.showPicker = true;
        },
        onSubmit(values) {
            console.log("submit", values);
        },
        start() {
            this.show = true;
        },
        // 选择结束时间
        end() {
            this.show1 = true;
        },
        // 点击确定
        confirm() {
            this.show = false;
            this.starttime =
                this.currentDate.getFullYear() +
                "-" +
                (Number(this.currentDate.getMonth()) + 1) +
                "-" +
                this.currentDate.getDate() +
                " " +
                this.currentDate.getHours() +
                ":" +
                this.currentDate.getMinutes();
            this.starttime1 = new Date(this.currentDate).getTime() / 1000;
        },
        // 点击取消
        cancel() {
            this.show = false;
        },
        confirm1() {
            this.show1 = false;
            this.endtime =
                this.currentDate1.getFullYear() +
                "-" +
                (Number(this.currentDate1.getMonth()) + 1) +
                "-" +
                this.currentDate1.getDate() +
                " " +
                this.currentDate1.getHours() +
                ":" +
                this.currentDate1.getMinutes();
            this.endtime1 = new Date(this.currentDate1).getTime() / 1000;
        },
        cancel1() {
            this.show1 = false;
        },
        // 处理控件显示的时间格式
        formatter(type, value) {
            // 格式化选择器日期
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            } else if (type === "hour") {
                return `${value}时`;
            } else if (type === "minute") {
                return `${value}分`;
            }
            return value;
        }
    }
};
</script>

<style scoped>
.heightF{
    height: calc(100vh - 132px);
    overflow-y: scroll;
}
</style >
